<template>
  <div class="videoupload">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">即刻运动</el-breadcrumb-item>
      <el-breadcrumb-item >个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>我的视频</el-breadcrumb-item>
      <el-breadcrumb-item>稿件修改</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="videoupload1">
      <el-form  ref="ruleForm"  class="demo-ruleForm">
        <el-form-item  style="width: 400px">
          <span slot="label">
      	<span style="font-size: 20px">标题修改（20字内）</span>
        <span style="color: red">（必填）</span>
        </span>
          <el-input v-model="form.title" maxlength="20"  show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
      	<span style="font-size: 20px">视频重传（若无操作则默认不修改）</span>
        <span style="color: cornflowerblue">（选填）</span><br>
          <el-upload
            class="upload-demo"
            drag
            action="/photo/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :file-list="fileList"
            :on-success="handle_success"
            :multiple="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传单个视频且大小不超过200MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item  prop="desc">
            <span slot="label">
      	<span style="font-size: 20px">简介修改（60字内）</span>
        <span style="color: cornflowerblue">（选填）</span>
        </span>
          <el-input type="textarea" v-model="form.brief" maxlength="60" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="videoupload2">
      <div class="pay"  @click="videoupload()">
        立即投稿
      </div>
      <div class="return"  @click="back()">
        <i class="el-icon-top-left"></i>
        返回个人中心&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "videoupload",
  data() {
    return {
      fileList: [],
      form: {
        url:null,
        title:"",
        brief:"",
        id:null
      }
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handle_success(res) {
          this.form.url=res.data;
          console.log(this.form.url);
          this.$message.success('视频上传成功')
    },
    //上传文件让第二次覆盖第一的文件
    handleChange(file,fileList){
      if (fileList.length>0) {
        this.fileList=[fileList[fileList.length-1]]
      }
    },
    videoupload: function () {
      console.log(this.form.url,this.form.title,this.form.brief);
      var data = {'id': this.form.id,
                  'brief': this.form.brief,
                  'videoaddr': this.form.url,
                  'videotitle': this.form.title};
      var url = '/video';
      this.$axios.put(url,data)
        .then( (res)=> {
          if (res.data.code === 0) {
            this.$message({message: "视频修改成功！", type: 'success'});
            this.$router.push("/personal");
          }
          else {
            this.$message({message:"视频修改失败!", type: 'error'})
          }
        }).catch(function (error) {
        console.log(error);
      } );
    },
    back() {
      this.$router.push("/personal");
    },
    indexs:function(){
      //根据petid查询到宠物的信息并展示
      var id=this.$route.query.videoid;
      console.log("视频修改")
      console.log(id);
      var url="/video/"+id;
      this.$axios.get(url)
        .then( (res)=> {
          this.form.id=res.data.data.id;
          this.form.title=res.data.data.videotitle;
          this.form.url=res.data.data.videoaddr;
          this.form.brief=res.data.data.brief;
        }).catch(function (error) {
        console.log(error);
      } );
    },
  },
  created(){
    //自动加载indexs方法
    this.indexs();
  },
}
</script>

<style scoped>
.el-form-item{
  margin-bottom: 20px;
}
.videoupload{
  position: relative;
  width: 70%;
  left: 15%;
  /*border-style: solid;*/
  /*border-color: #ffcc00 ;*/
}
.el-breadcrumb{
  line-height: 2;
}
.videoupload1{
  position: relative;
  width: 70%;
  left: 15%;
  top: 10px;
  /*border-style: solid;*/
  /*border-color: #ffcc00 ;*/

}
.videoupload2{
  position: relative;
  height: 100px;
  width: 70%;
  left: 15%;
  /*border-style: solid;*/
  /*border-color: #ffcc00 ;*/
  text-align: right
}
.pay{
  float: right;
  width: 100px;
  height: 50px;
  background-color: rgb(255,80,80);
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight:bolder;
  cursor:pointer;
  border-radius: 5px;
}
.return{
  float: right;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: cornflowerblue;
  font-weight:bolder;
  cursor:pointer;
}
</style>
